<!DOCTYPE html>
<html lang="en">
	<head>
		<title>TinShowcase</title>
		<meta charset="UTF-8">
		<meta name="author" content="7inpham@gmail.com">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
	</head>
	<style>
		[class*='column-'] > span {
			display: block;
			background: #AADBF5;
			text-align: justify;
			margin: 2px;
			padding: 3px;
		}
		
		[class*='column-'] > p {
			display: block;
			text-align: justify;
			margin: 10px;
		}
	</style>
	<body>
		<div class="wrapper">
			<h2>Grid System</h2>
			<hr>
			<h3>Type 1</h3>
			<div class="row">
				<div class="column-3">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
				<div class="column-3">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
				<div class="column-6">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
			</div>
			<div class="row">
				<div class="column-3"><span>3</span></div>
				<div class="column-3"><span>3</span></div>
				<div class="column-6"><span>6</span></div>
			</div>
			<div class="row">
				<div class="column-4"><span>4</span></div>
				<div class="column-4"><span>4</span></div>
				<div class="column-4"><span>4</span></div>
			</div>
			<div class="row">
				<div class="column-2"><span>2</span></div>
				<div class="column-2"><span>2</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-4"><span>4</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
			</div>
			<div class="row">
				<div class="column-2"><span>2</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-4"><span>4</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
			</div>
			<div class="row">
				<div class="column-2"><span>2</span></div>
				<div class="column-2"><span>2</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
				<div class="column-1"><span>1</span></div>
			</div>
			<div class="row">
				<div class="column-12"><span>12</span></div>
			</div>
			<h3>Type 2</h3>
			<div class="row">
				<div class="column-1-span-3">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
				<div class="column-4-span-3">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
				<div class="column-7-span-6">
					<p>
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</p>
				</div>
			</div>
			<div class="row">
				<div class="column-1-span-6"><span>6</span></div>
				<div class="column-7-span-6"><span>6</span></div>
			</div>
			<div class="row">
				<div class="column-1-span-2"><span>2</span></div>
				<div class="column-3-span-2"><span>2</span></div>
				<div class="column-5-span-1"><span>1</span></div>
				<div class="column-6-span-4"><span>4</span></div>
				<div class="column-10-span-3"><span>3</span></div>
			</div>
			<div class="row">
				<div class="column-7-span-6"><span>6</span></div>
			</div>
			<div class="row">
				<div class="column-1-span-2"><span>2</span></div>
				<div class="column-5-span-1"><span>1</span></div>
				<div class="column-10-span-3"><span>3</span></div>
			</div>
			<div class="row">
				<div class="column-1-span-2"><span>2</span></div>
				<div class="column-5-span-1"><span>1</span></div>
				<div class="column-6-span-4"><span>4</span></div>
				<div class="column-10-span-3"><span>3</span></div>
			</div>
			<div class="row">
				<div class="column-1-span-3"><span>3</span></div>
				<div class="column-4-span-3"><span>3</span></div>
				<div class="column-7-span-6"><span>6</span></div>
			</div>
			<h3>Layout</h3>
			<div class="row">
				<div class="column-1-span-5">
					<span style="display: block; height: 300px; overflow: hidden">
						If you will need more columns for your layout, you can add them here; likewise you can remove unneeded columns.
						These columns will be the building blocks of your layout. You use them as widths (and heights, if you like) the same way as you would other units in CSS.
						For example, if you want to float a 3-column div to the right of a 2-column div, you could write the following
					</span>
				</div>
				<div class="column-6-span-7">
					<div class="row">
						<div class="column-1-span-4"><span>3</span></div>
						<div class="column-5-span-8"><span>4</span></div>
					</div>
					<div class="row">
						<div class="column-6-span-1"><span>1</span></div>
						<div class="column-7-span-4"><span>4</span></div>
						<div class="column-11-span-2"><span>2</span></div>
					</div>
					<div class="row">
						<div class="column-1-span-6"><span>6</span></div>
						<div class="column-7-span-4"><span>4</span></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="column-1-span-11"><span>1</span></div>
				<div class="column-12-span-1"><span>11</span></div>
			</div>

			<h2>Typography</h2>
			<hr>

			<h1>This is heading 1</h1>
			<h2>This is heading 2</h2>
			<h3>This is heading 3</h3>
			<h4>This is heading 4</h4>
			<h5>This is heading 5</h5>
			<h6>This is heading 6</h6>

			<p>HTML is a language for describing web pages.....</p>

			<p>This is normal text - <b>and this is bold text</b>.</p>

			<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

			<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

			<p>This text contains<br>a line break.</p>

			<p>He named his car <i>The lightning</i>, because it was very fast.</p>

			<p>This is a <u>parragraph</u>.</p>

			<p>Do not forget to buy <mark>milk</mark> today.</p>

			<p>WWF's goal is to: 
				<q>Build a future where people live in harmony with nature.</q>
				We hope they succeed.
			</p>

			<p><s>My car is blue.</s></p>

			<p>Sample <samp>output</samp> from a computer program</p>

			<p><small>Copyright 1999-2050 by Refsnes Data</small></p>

			<p>My mother has <span style="color:blue">blue</span> eyes.</p>

			<p>This is a <strong>Strong text</strong></p>

			<p>This text contains <sub>subscript</sub> text.</p>

			<p>This text contains <sup>superscript</sup> text.</p>

			<p><code>A piece of computer code</code></p>

			<p><var>Variable</var></p>

			<p>Keyboard input <kbd>Ctrl + A</kbd></p>

			<h2>Others</h2>
			<hr>

			<p>Go on <time datetime="2008-02-14 20:00">Valentines day</time></p>

			<p><abbr title="World Health Organization">WHO</abbr> is worldwide</p>

			<p>This is a <a href="#">link</a></p>

			<address>
				Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
				Visit us at:<br>
				Example.com<br>
				Box 564, Disneyland<br>
				USA
			</address>

			<blockquote cite="http://www.worldwildlife.org/who/index.html">
				For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
			</blockquote>

			<h2>HTML5 Tags: section, article, aside, header, footer</h2>
			<hr>
			<section>
				<h4>Epcot Center</h4>
				<p>The World Wide Fund for Nature (WWF) is....</p>
			</section>
			<article>
				<h4>Epcot Center</h4>
				<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
			</article>
			<aside>
				<h4>Epcot Center</h4>
				<p>The Epcot Center is a theme park in Disney World, Florida.</p>
			</aside>
			<header>
				<h4>Epcot Center</h4>
				<p><time pubdate datetime="2011-03-15"></time></p>
			</header>
			<footer>
				<p>Posted by: Hege Refsnes</p>
				<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
			</footer>

			<h2>Lists</h2>
			<hr>
			<dl>
				<dt>Coffee</dt>
				<dd>Black hot drink</dd>
				<dt>Milk</dt>
				<dd>White cold drink</dd>
			</dl>

			<p>
			<ol>
				<li>Coffee</li>
				<li>Tea</li>
				<li>Milk</li>
			</ol>
			<ul>
				<li>Coffee</li>
				<li>Tea</li>
				<li>Milk</li>
			</ul>
			</p>
			
			<h2>Form</h2>
			<hr>
			<form>
				<fieldset>
					<legend>Personalia:</legend>
					Name: <input type="text"><br>
					Email: <input type="text"><br>
					Date of birth: <input type="text">
				</fieldset>
			</form>
			<form action="demo_form.asp" method="get">
				First name: <input type="text" name="fname"><br>
				Last name: <input type="text" name="lname"><br>
				<label for="male">Male</label>
				<input type="radio" name="sex" id="male" value="male"><br>
				<label for="female">Female</label>
				<input type="radio" name="sex" id="female" value="female"><br>
				<input type="submit" value="Submit">
				<input list="browsers">
				<datalist id="browsers">
					<option value="Internet Explorer">
					<option value="Firefox">
					<option value="Chrome">
					<option value="Opera">
					<option value="Safari">
				</datalist>
				<textarea rows="4" cols="50">
					At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
				</textarea>
				<select>
					<optgroup label="Swedish Cars">
						<option value="volvo">Volvo</option>
						<option value="saab">Saab</option>
					</optgroup>
					<optgroup label="German Cars">
						<option value="mercedes">Mercedes</option>
						<option value="audi">Audi</option>
					</optgroup>
				</select>

				<select>
					<option value="volvo">Volvo</option>
					<option value="saab">Saab</option>
					<option value="opel">Opel</option>
					<option value="audi">Audi</option>
				</select>

				<button type="button">Click Me!</button>
			</form>

			<progress value="27" max="100"></progress>

			<hr>

			<figure>
				<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
				<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
			</figure>

			<img src="smiley.gif" alt="Smiley face" height="42" width="42">

			<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
			<map name="planetmap">
				<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
				<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
				<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
			</map>

			<nav>
				<a href="/html/">HTML</a> |
				<a href="/css/">CSS</a> |
				<a href="/js/">JavaScript</a> |
				<a href="/jquery/">jQuery</a>
			</nav>

			<hr>

			<table>
				<tr>
					<td>Cell A</td>
					<td>Cell B</td>
				</tr>
			</table>

			<table class="max-width">
				<tr>
					<th>Month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table>

			<table>
				<thead>
					<tr>
						<th>Month</th>
						<th>Savings</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td>Sum</td>
						<td>$180</td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td>January</td>
						<td>$100</td>
					</tr>
					<tr>
						<td>February</td>
						<td>$80</td>
					</tr>
				</tbody>
			</table>

			<hr>

			<nav class="l-stacked">
				<h1>Primary Navigation</h1>
				<ul>
					<li>QIP
						<ul class="l-stacked">
							<li>Team</li>
							<li>Location</li>
						</ul>
					</li>
					<li>About Us
						<ul class="l-stacked">
							<li>Team</li>
							<li>Location</li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</body>
</html>
